<template>
	<view class='' >
		<view class="u-p-20">
			
		
		<view class="u-p-20 bg_FFFFFF u-b-r-16">
			<view class="u-flex u-p-20" style="border-bottom: 1rpx solid #F4F1F1;">
				<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img1.png' width='36rpx' height='36rpx'></u-image>
				<view class="u-p-l-10 u-weight u-h-36">{{userinfo.shop_name}}</view>
			</view>
			<view class="u-p-20 u-flex u-row-between" style="border-bottom: 1rpx solid #F4F1F1;"
				v-for="(item,index) in userinfo.item" :key="index">
				<view class="u-flex">
					<view class="">
						<u-image :src='item.imgs[0]' width='183rpx' height='183rpx'></u-image>
					</view>
					<view class="u-p-l-20 ">
						<view class="u-weight u-w-450">{{item.goods_name}}</view>
						<!-- <view class="u-weight u-p-t-10">可口30克*12枚</view> -->
						<view class="u-font-20  u-m-t-10">
							{{item.spece_value_id}}</view>
						<view class="u-flex u-row-between u-w-550">
							<view class=" u-p-t-10" style="color: #FC3533;">￥{{item.price}}</view>
							<view class="u-font-24" style="color:#454545;">{{item.num}}</view>
						</view>

					</view>

				</view>

			</view>

			<view class="">
				<u-row>
					<u-col span='4'>
						<view class="u-flex u-m-t-30">
							<view class="">
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img27.png' width='33rpx' height='33rpx' v-if="num==1">
								</u-image>
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img26.png' width='33rpx' height='33rpx' v-else
									@click="num=1"></u-image>

							</view>
							<view class="u-flex u-m-l-20">
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/good.png" mode="aspectFill" width="30rpx"
									height='30rpx'>
								</u-image>
								<view class=" cl_FF5502FF  u-font-20 ">好评</view>
							</view>
						</view>

					</u-col>

					<u-col span='4'>
						<view class="u-flex u-m-t-30">
							<view class="">
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img27.png' width='33rpx' height='33rpx' v-if="num==2">
								</u-image>
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img26.png' width='33rpx' height='33rpx' @click="num=2"
									v-else></u-image>

							</view>
							<view class="u-flex u-m-l-20">
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/more.png" mode="aspectFill" width="30rpx"
									height='30rpx'>
								</u-image>
								<view class=" cl_FF5502FF  u-font-20 ">中评</view>
							</view>
						</view>
					</u-col>
					<u-col span='4'>
						<view class="u-flex u-m-t-30">
							<view class="">
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img27.png' width='33rpx' height='33rpx' v-if='num==3'>
								</u-image>
								<u-image src='https://www.sqkjkj.vip/wxImg/orderlist/img26.png' width='33rpx' height='33rpx' @click="num=3"
									v-else></u-image>

							</view>
							<view class="u-flex u-m-l-20">
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/bad.png" mode="aspectFill" width="30rpx"
									height='30rpx'>
								</u-image>
								<view class=" cl_FF5502FF  u-font-20 ">差评</view>
							</view>
						</view>

					</u-col>
				</u-row>
			</view>

			<!-- 评价内容 -->
			<view class="u-m-t-45">评价内容</view>
			<view class="u-m-t-20">
				<view class="u-b-r-16 u-p-20" style="border: 1rpx dashed #D9D9D9;background-color:#F6F6F6  ;">
					<u-input type='textarea' v-model="value" :clearable='false' maxlength='200' @input='input'>
					</u-input>
					<view class="" style="text-align: right;color: #898989;">{{len}}/200</view>
				</view>
			</view>

			<view class="u-m-t-45 u-flex u-row-between">
				<view class="">上传图片</view>
				<view class="u-font-20">*请上传真实信息图片</view>
			</view>

			<u-upload @on-success="uploaded" upload-text="点击上传" @on-remove="remove" :preview-full-image="false"
				:file-list="fileList" imageMode="aspectFit" :show-progress="false" width="150rpx" height="150rpx"
				ref="uUpload" :auto-upload="true" max-count="1" :name="'img'">
			</u-upload>
		</view>
</view>
		<view class="u-fix u-w-750 u-b-0 u-p-30 bg_FFFFFF">
			<view @click="save" class="u-w-630 u-h-98 u-text-center u-l-h-98 u-font-30 u-b-r-16 cl_FFF u-auto"
				style="background: linear-gradient(-64deg, #FF382C, #FF633F);">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择评价类型
				num: 1,
				// 输入长度
				len: 0,
				// 输入内容
				value: "",
				userinfo: '',
				fileList: [],
				// 表单参数
				model: {
					avatar: '',
					name: ''
				},
			}
		},
		onLoad(obj) {
			// 获取订单详情
			this.$api.people_pay_list_detal({
				order_id: obj.num
			}, res => {
				console.log(res);
				this.userinfo = res.data.data
			})
		},


		methods: {
			// 修改头像
			uploaded(lists) {
				this.model.avatar = lists.id
			},

			// 移除图片
			remove(index, lists) {
				this.fileList = []
			},
			// 输入的内容
			input() {
				this.len = this.value.length
			},
			// 点击提交
			save() {
				
				let arr = []
				for (var i = 0; i < this.userinfo.item.length; i++) {
					let massage = {
						sku: this.userinfo.item[i].sku,
						grade: this.num,
						detail: this.value,
						img: this.model.avatar
					}
					arr.push(massage)
				}
			
				setTimeout(() => {
					this.$api.write_massage({
						order_id: this.userinfo.id,
						comment: arr
					}, res => {
						console.log(res);
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}, 500)

			}
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}
</style>
